<div id="set-mileage">
    <div style="margin:10px">
        <Row style="margin: 10px 0;">
            <i-Col span="24">
                <i-input v-model="deviceid" :placeholder="$t('login.inputDeviceNumber')" style="width: 200px;"></i-input>
            </i-Col>
        </Row>
        <Row style="margin: 10px 0;">
            <i-Col span="24">
                <i-input v-model.trim="mileage" :placeholder="$t('bgMgr.inputMileage')" style="width: 200px;"></i-input>
            </i-Col>
        </Row>
        <Row style="margin: 10px 0;">
            <i-Col span="24">
                <i-button @click="handleClear" type="primary" style="width: 200px;">{{$t('monitor.confirm')}}</i-button>
            </i-Col>
        </Row>
       
    </div>
   <script>
        new Vue({
            el:'#set-mileage',
            i18n: utils.getI18n(),
            data:{
                deviceid:'',
                mileage:'',
            },
            methods:{
                handleClear:function(){
                    if(this.deviceid.trim() == ''){
                        this.$Message.error(this.$t('login.inputDeviceNumber'));
                        return;
                    };
                    var me = this,url = myUrls.fixTotalDistance() ,mileage = Number(this.mileage);
                    if( isNaN(mileage)  ){
                        this.$Message.error(me.$t('bgMgr.pleaseInputNumber')); 
                        return ;
                    }
                    utils.sendAjax(url, { deviceid: this.deviceid, totaldistance: mileage  }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success( me.$t('monitor.setupSucc'));
                        } else {
                            me.$Message.error(me.$t('monitor.setupFail') + " ：" + resp.cause);
                        }
                    });
                }
            }
        })
   </script>
</div>